<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	ul{
		list-style: none;
	}
	li{
		color: #65aa96;
		font-size: 30px;
		float: left;
		font-weight: bold;
		width: 120px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		cursor: pointer;
		border: solid 1px #996;
		background-color: #dd8866;
	}
	.app{
		clear:both;

	}
	.ppap{
		width: 486px;
		height: 300px;
		border: solid 1px #553399;
		margin-left: 40px;
		color: #aa3399;
		font-size: 40px;
		text-align: center;
		display: none;
		background-color: #cc9924;
	}
	.show{
		display: block;
	}
	</style>
</head>
<body>
	<ul>
		<li>GXG</li>
		<li>ALT</li>
		<li>Adidas</li>
		<li>NIKE</li>
	</ul>
	<div class="app">
		<div class="ppap show">棉服</div>
		<div class="ppap">夹克</div>
		<div class="ppap">boost男鞋</div>
		<div class="ppap">空军一号</div>
	</div>
	<script type="text/javascript" src="../JQuery/jquery-1.11.1.js"></script>
	<script type="text/javascript">
		$("ul li").click(function(){
			var ind=$(this).index();
			console.log("ind")
			$(".ppap").eq(ind).addClass("show").siblings().removeClass("show")
		})
	</script>
</body>
</html>